<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <span>发起流程</span>
      </template>
      <div class="form-conf" v-if="dialog.visible">
        <v-form-render :form-json="formModel" :nbcioHeader="nbcioHeader" :form-data="formData" ref="vfRenderRef"></v-form-render>
        <div class="cu-submit">
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup name="WorkStart" lang="ts">
  import { getProcessForm, startProcess } from '@/api/workflow/work/process';
  import { getToken } from '@/utils/auth';

  import { ComponentInternalInstance } from "vue";

  const route = useRoute();
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;

  const vfRenderRef = ref(null);

  const deployId = ref();
  const definitionId = ref();
  const formModel = ref({});
  const formData = ref({});
  let nbcioHeader:any ;

  const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
  });

  const initData = async () => {
    deployId.value = route.params && route.params.deployId;
    definitionId.value = route.query && route.query.definitionId;
    const res = await getProcessForm({ definitionId: definitionId.value, deployId: deployId.value });
    formModel.value = res.data.formModel;
    dialog.visible = true;
    nextTick(async () => {
      vfRenderRef.value.setFormJson(formModel.value || {formConfig: {}, widgetList: []});
    });
  }

  const submit = async () => {
    const data = await vfRenderRef.value.getFormData();
    const Widgetlist = await vfRenderRef.value.getFieldWidgets();
    //替换文件上传成功后的文件名称与url，以便后面回显用
    let fileUpload = Widgetlist?.filter(item => item.type === "file-upload");
    fileUpload?.forEach((fileitem) => {
      data[`${fileitem.name}`]?.forEach((dataitem,index) => {
        data[`${fileitem.name}`][index].name = data[`${fileitem.name}`][index].response.data?.newFileName;
        data[`${fileitem.name}`][index].url = data[`${fileitem.name}`][index].response.data?.url;
      })

    })
    //替换图片上传成功后的文件名称与url，以便后面回显用
    let picUpload = Widgetlist?.filter(item => item.type === "picture-upload");
    picUpload?.forEach((picitem) => {
      data[`${picitem.name}`]?.forEach((dataitem,index) => {
        data[`${picitem.name}`][index].name = data[`${picitem.name}`][index].response.data?.newFileName;
        data[`${picitem.name}`][index].url = data[`${picitem.name}`][index].response.data?.url;
      })

    })

    console.log("submit data=",data)
    console.log("submit Widgetlist=",Widgetlist)
    if (definitionId.value) {
      const res = await startProcess(definitionId.value, JSON.stringify(data));
      proxy?.$modal.msgSuccess(res.msg);
      const obj = { path: "/work/own" };
      proxy?.$tab.closeOpenPage(obj);
    }
  }

  const reset = () => {
    vfRenderRef.value?.resetFields();
  }

  onBeforeMount(() => {
    const clientid = import.meta.env.VITE_APP_CLIENT_ID;
    nbcioHeader = { "Authorization":"Bearer " + getToken(),
                    "Clientid": clientid }
  });

  onMounted(() => {
    initData();
  });
</script>

<style lang="scss" scoped>
.form-conf {
  margin: 15px auto;
  width: 80%;
  padding: 15px;
}
</style>
